<template>
  <el-table :data="studentInfoList">
    <el-table-column prop="id" label="学号" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="score" label="成绩" />
    <el-table-column prop="dorm" label="宿舍" />
    <el-table-column label="操作">
      <template #default="{ row, $index }">
        <el-button size="small" type="primary" @click="editInfo(row, $index)">编辑</el-button>
        <el-popconfirm title="请确认是否删除?" @confirm="confirmDelete($index)">
          <template #reference>
            <el-button size="small" type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="editDialogVisible" title="编辑学生信息">
    <el-form label-width="80">
      <el-form-item label="学号">
        <el-input v-model="studentInfoObject.id"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="studentInfoObject.name"></el-input>
      </el-form-item>
      <el-form-item label="成绩">
        <el-input v-model="studentInfoObject.score" type="number"></el-input>
      </el-form-item>
      <el-form-item label="宿舍">
        <el-input v-model="studentInfoObject.dorm"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button size="small" type="primary" @click="confirmEdit()">修改</el-button>
      <el-button size="small" @click="editDialogVisible = false">取消</el-button>
    </template>
  </el-dialog>
  <h4>及格人数：{{ passSummary }}</h4>
  <h4>及格率：{{ passRate }}</h4>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { getStudentInfos } from '@/api/studentApi'
import { ElMessage } from 'element-plus'

const studentInfoList = ref([])
const editDialogVisible = ref(false)
const editIndex = ref(-1)
const studentInfoObject = ref({
  id: '',
  name: '',
  score: 0,
  dorm: '',
})

const editInfo = (info, index) => {
  editDialogVisible.value = true
  editIndex.value = index
  studentInfoObject.value = { ...info }
}

const confirmDelete = (index) => {
  studentInfoList.value.splice(index, 1)
  ElMessage.success('删除成功')
}

const confirmEdit = () => {
  studentInfoList.value.splice(editIndex.value, 1, { ...studentInfoObject.value })
  editDialogVisible.value = false
  editIndex.value = -1
  studentInfoObject.value = {
    id: '',
    name: '',
    score: 0,
    dorm: '',
  }
  ElMessage.success('修改成功')
}

const passSummary = computed(() => {
  return studentInfoList.value.filter((item) => item.score >= 60).length
})

const passRate = computed(() => {
  if (studentInfoList.value.length === 0) return '0%'
  return (
    (
      (studentInfoList.value.filter((item) => item.score >= 60).length /
        studentInfoList.value.length) *
      100
    ).toFixed(2) + '%'
  )
})

onMounted(() => {
  getStudentInfos()
    .then((response) => {
      studentInfoList.value = response.data
    })
    .catch((error) => {
      console.error(error)
      ElMessage.error('获取学生信息失败!')
    })
})
</script>

<style scoped>
h4 {
  text-align: left;
  margin: 20px 0;
}

.el-table {
  margin: 20px 0;
}
</style>